import { Switch } from 'antd'
import { SunOutlined, MoonOutlined } from '@ant-design/icons'
import { useSelector, useDispatch } from 'react-redux'
import { toggleTheme } from '../redux/themeSlice'

const ThemeToggle = () => {
  const dispatch = useDispatch()
  const isDark = useSelector((state: unknown) => (state as { theme: { isDark: boolean } }).theme.isDark)

  const handleToggle = () => {
    dispatch(toggleTheme())
  }

  return (
    <Switch
      checked={isDark}
      onChange={handleToggle}
      checkedChildren={<MoonOutlined />}
      unCheckedChildren={<SunOutlined />}
      style={{
        backgroundColor: isDark ? '#001529' : '#f0f0f0'
      }}
    />
  )
}

export default ThemeToggle
